<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">

    <body>

        <ui:composition template="./../Templates/TemplateProfesionalSalud.xhtml">

            <ui:define name="contentS">
                <p:growl id="growl" showDetail="true" life="2000" autoUpdate="true"/>
                <h:form id="frmPaciente">
                    <center><b><h:outputText value="PACIENTES EN LINEA" style="font-size: 16px; color: #003399"/></b></center>
                    <br />
                    <h:outputText value="Para visualizar datos seleccione al paciente" style="font-size: 12px; color: #AFAFAF"/>
                    <br />
                    <p:dataTable id="tblPaciente" value="#{controladorPaciente.lstPacientesCon}" 
                                 var="paciente" rowKey="#{paciente.id_p}"
                                 selectionMode="single" 
                                 selection="#{controladorPaciente.pacienteSel}">
                        <p:ajax event="rowSelect" update=":frmSignosVitales" listener="#{controladorSignosVitales.setId_paciente(controladorPaciente.pacienteSel.id_p)}" oncomplete="wdlgVerSignosVitales.show()" />

                        <p:column headerText="Cédula">
                            <h:outputText value="#{paciente.ci}"/>
                        </p:column>
                        <p:column headerText="Nombres">
                            <h:outputText value="#{paciente.nombres}"/>
                        </p:column>
                        <p:column headerText="Apellidos">
                            <h:outputText value="#{paciente.apellidos}"/>
                        </p:column>
                        <p:column headerText="Sexo">
                            <h:outputText value="#{paciente.sexo}"/>
                        </p:column>
                        <p:column headerText="Fecha de Nacimiento">
                            <h:outputText value="#{paciente.fechaNac}"/>
                        </p:column>

                        <f:facet name="footer">
                            <p:commandButton id="btnActualizar" value="Actualizar" update=":frmPaciente:tblPaciente" />
                        </f:facet>
                    </p:dataTable>
                </h:form>

                <p:ajaxStatus style="width:64px;height:64px;position:fixed;right:5px;bottom:5px">  
                    <f:facet name="start">  
                        <p:graphicImage value="/resources/images/loading.gif" />  
                    </f:facet>  

                    <f:facet name="complete">  
                        <h:outputText value="" />  
                    </f:facet>  
                </p:ajaxStatus> 

            </ui:define>




            <ui:define name="dialogos">
                <p:dialog id="VerSV" widgetVar="wdlgVerSignosVitales"   header="Electrocardiograma online" 
                          height="500" width="1000"
                          modal="true" resizable="false" closable="true"
                          >
                    <p:ajax event="close" update="growl" listener="#{controladorSignosVitales.onCloseDialog()}"/>
                    <h:form id="frmSignosVitales" >
                        <b><h:outputText value="Datos Informativos" style="font-size: 14px; color: #003399"/></b>
                        <h:panelGrid id="pngSignosV" columns="4">
                            <h:outputText value="Cédula:" style="color:#003399" />
                            <h:outputText value="#{controladorPaciente.pacienteSel.ci}"/>

                            <h:outputText value="Edad:" style="color:#003399" />                        
                            <h:outputText value="#{myUtil.calcularEdadFN(controladorPaciente.pacienteSel.fechaNac)}"/>

                            <h:outputText value="Nombres:" style="color:#003399" />
                            <h:outputText value="#{controladorPaciente.pacienteSel.nombres}"/>

                            <h:outputText value="Apellidos:" style="color:#003399" />
                            <h:outputText value="#{controladorPaciente.pacienteSel.apellidos}" />

                            <h:outputText value="Dirección:" style="color:#003399" />
                            <h:outputText value="#{controladorPaciente.pacienteSel.direccion}" />
                            <h:outputText value="Teléfono:" style="color:#003399" />
                            <h:outputText value="#{controladorPaciente.pacienteSel.telefono}" />
                        </h:panelGrid>
                        <p:poll interval="2" update=":frmSignosVitales:frmSigVit:chartECG"/>

                        <h:form id="frmSigVit">
                            <p:lineChart id="chartECG" value="#{controladorSignosVitales.leerDatos()}" zoom="true" showMarkers="false"   
                                         title="Electrocardiograma" minY="0" maxY="5" minX="#{controladorSignosVitales.t-5000}" 
                                         maxX="#{controladorSignosVitales.t}" style="height:300px;" widgetVar="chart"
                                         extender="ext" shadow="false" xaxisLabel="FC: #{controladorSignosVitales.pr}   %SpO2: #{controladorSignosVitales.sp}   "/>
<!--                            <h:outputText value="FC: #{controladorSignosVitales.fc}   "/>
                            <h:outputText value="PRbpm: #{controladorSignosVitales.pr}   "/>
                            <h:outputText value="%SpO2: #{controladorSignosVitales.sp}   "/>-->
                        </h:form>
                        <script type="text/javascript">
                            function ext() {
                                this.cfg.seriesDefaults = {
                                    lineWidth: 0.3,
                                    color: '#000000'
                                };
                                this.cfg.grid = {
                                    gridLineColor: '#ffcc66',
                                    background: '#ffffff'
                                };
                            }
                        </script>
                    </h:form>
                    <p:ajaxStatus style="width:64px;height:64px;position:fixed;right:5px;bottom:5px">  
                        <f:facet name="start">  
                            <p:graphicImage value="/resources/images/loading.gif" />  
                        </f:facet>  

                        <f:facet name="complete">  
                            <h:outputText value="" />  
                        </f:facet>  
                    </p:ajaxStatus> 
                </p:dialog>

            </ui:define>

        </ui:composition>

    </body>
</html>
